$(function () {
    // 渲染数据
    var q = {
        pagenum: 1,
        pagesize: 2,
    }
    getUserList()
    // 获取数据，渲染页面
    function getUserList() {
        $.ajax({
            method: 'get',
            url: '/admin/users',
            data: q,
            success(res) {
                // console.log(res);

                // console.log(res.data);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                var htmlStr = template('tpl-list', res)
                $('tbody').html(htmlStr)
                // 渲染页码
                renderPage(res.total)
            }
        })
    }
    // 分页功能
    function renderPage(total) {
        layui.laypage.render({
            elem: 'articlePage', // 装页码按钮的容器id
            count: total, // 数据的总条数
            limit: q.pagesize, //每页显示的条数
            curr: q.pagenum, //当前获取的是第几页的数据
            layout: ['prev', 'page', 'next', 'count', 'limit'], // 分页按钮的排版
            limits: [2, 4, 6, 8, 10], // 每页条目的选择框
            // 1-渲染页码时,jump会被调用
            // 2-单机分页按钮时,jump会被调用
            jump: function (obj, first) { // 切换页码时,会调用此函数
                // console.log(obj);  分页的配置项对象(obj.curr obj.limit)
                /*
                 渲染页码调用jump,first的值位true
                 点击按钮调用jump,first的值位undefined
                */
                /* 如果是渲染页码调用的jump,则不执行里面的代码*/
                if (first === true) {
                    return;
                }
                // 获取每页的条数,并设置给参数对象p
                q.pagesize = obj.limit
                // 获取当前单击页码的值
                // console.log(obj.curr);
                // 修改参数对象p
                q.pagenum = obj.curr
                // 重新获取文章数据
                getUserList()
            }
        })
    }
    // 单击"编辑"按钮 页面跳转到编辑页面中
    $('body').on('click', '.layui-btn-xs', function () {
        var id = $(this).attr('data-id')
        localStorage.setItem('id', id)
        // console.log(id);
    })
    // 删除功能
    $('body').on('click', '.delete', function () {
        var id = localStorage.getItem('id')
        // console.log(id);
        // 询问
        layui.layer.confirm('您确定要删除此分类吗？', {
            icon: 3,
            title: '提示'
        }, function (index) {
            // 调接口 完成删除操作
            $.ajax({
                method: 'delete',
                url: '/admin/users/' + id,
                success(res) {
                    console.log(res);
                    if (res.status !== 0) {
                        return layui.layer.msg(res.message, {
                            icon: 5
                        })
                    }
                    layui.layer.msg(res.message, {
                        icon: 6
                    }, function () {
                        getUserList()
                    })

                }
            })
            layui.layer.close(index)
        })
    })

    // 单击重置密码按钮 弹出模态框
    $('body').on('click', '.resetpwd', function () {
        layui.layer.open({
            type: 1,
            title: '重置密码',
            area: ['400px', '270px'],
            content: $('#repwd-form-tpl').html()
        })
    })
    // 自定义校验规则
    layui.form.verify({
        pwd: [
            /^\S{6,12}$/,
            '密码必须是6-12位的非空字符'
        ],
        // 设置新旧密码不能一致
        rePwd: function (value) {
            var rePwd = $('[name=rePwd]').val()
            if (rePwd !== value) {
                return '两次密码不一致'
            }
        }
    })
    // 给表单注册提交事件
    $('body').on('submit', '#repwd-form', function (e) {
        e.preventDefault()
        // console.log(data);
        var id = localStorage.getItem('id')
        var password = $('input[name=rePwd]').val()
        var password = $('input[name=rePwd]').val()
        // console.log(data);
        var id = localStorage.getItem('id')
        console.log(id, password);
        // 发送ajax请求
        $.ajax({
            method: 'PUT',
            url: '/admin/users/' + id,
            data: {
                password
            },
            success(res) {
                console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                layui.layer.msg(res.message, {
                    icon: 6
                }, function () {
                    $('.layui-layer-close1').click()
                    getUserList()
                })
            }
        })
    })
})
